<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 考勤管理 </el-breadcrumb-item>
                <el-breadcrumb-item>修改考勤</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
                <div class="form-box">
                    <el-form ref="form" :model="form" label-width="80px" >
                        <el-divider content-position="left">考勤信息</el-divider>

                        
                        <el-form-item label="考勤日期">
                            <el-date-picker
                                v-model="form.date"
                                type="date"
                                :format="dateformat"
                                disabled
                                placeholder="签到日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="签到时间">
                           <el-time-picker
                                v-model="form.startTime"
                                :format="timeformat"
                                :picker-options="{
                                selectableRange: '08:00:00 - 12:00:00'
                                }"
                                placeholder="暂未签到">
                            </el-time-picker>
                        </el-form-item>
                         

                        <el-form-item label="签退时间">
                            <el-time-picker
                                v-model="form.endTime"
                                :format="timeformat"
                                :picker-options="{
                                selectableRange: '13:00:00 - 22:00:00'
                                }"
                                placeholder="暂未签到">
                            </el-time-picker>
                        </el-form-item>

                        <el-form-item label="状态">
                            <el-switch
                                style="display: block"
                                v-model="form.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="01"
                                inactive-value="00"
                                active-text="已签到"
                                inactive-text="未签到">
                            </el-switch>
                        </el-form-item>

                        <el-form-item label="结果">
                            <el-radio v-model="form.result" v-for="(item,index) in result" :key="index" :label="index" border size="medium">{{item}}</el-radio>
                        </el-form-item>

                    <el-divider content-position="left">员工信息</el-divider>

                            <el-form-item label="员工编号" >
                            <el-input v-model="employee.tellerId" disabled></el-input>
                        </el-form-item>

                            <el-form-item label="员工姓名" >
                            <el-input v-model="employee.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="联系方式" >
                            <el-input v-model="employee.phone" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="邮箱" >
                            <el-input v-model="employee.email" disabled></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                            <el-button type="primary" @click="onSubmit('form')" icon="el-icon-edit">修改</el-button>
                            <el-button type="warning" @click="reset()" icon="el-icon-refresh-right">重置</el-button>
                        </el-form-item>

                </el-form>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            id: this.$route.query.id,
            employee: {},
            check:{},
            form: {
               id:"",
               date:"",
               startTime:"",
               endTime:"",
               status:'',
               result:''
            },
            dateformat:'yyyy-MM-dd',
            timeformat:'HH:mm:ss',
            result:{},
        };
    },
    created: function () {
        this.getResult();
        this.init();
        
    },
    methods: {
        async init() {
            var a = await this.$http.get('/check/' + this.id);
            if (a.code == 200) {
                this.check = a.data;
                this.initForm(this.check);
                this.getEmployee();
                
            } else {
                this.$message.error(a.message);
            }
          
        },

        initForm(check){
            this.form.id=this.id;
            this.form.date=check.date;
            this.form.startTime=check.startTime;
            this.form.endTime=check.endTime
            this.form.status=check.status
            this.form.result=check.result
        },

        async getEmployee() {
            var a = await this.$http.get('/employeetid/' + this.check.tid);
            if (a.code == 200) {
                this.employee = a.data;
            } else {
                this.$message.error(a.message);
            }
        },

        getResult(){
            this.result=JSON.parse(window.sessionStorage.getItem("result"));
        },

        onSubmit(formName) {
            console.log(this.form.result);
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    var d = await this.$http.put('/check', this.form);
                    if (d.code == 200) {
                        this.$message.success(d.message);
                    } else {
                        this.$message.error(d.message);
                    }
                } else {
                    this.$message.warning('请把内容填写完整!');
                }
            });
        },

        reset() {
            this.$confirm('此操作将恢复至未修改前, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                   this.initForm(this.check);
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
        },

        goback(){
            this.$router.go(-1);
        },
    }
};
</script>